  <?
        require_once('header.php'); // uri  
        ?>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
      <link rel="stylesheet" href="css/editshelf.css"> 	
            <div class="wrpInnerBody">

        <?
        require_once('subheader.php'); // uri  
        ?>      

                <div class="wrpContent">
                    <div class="wrpInnerContent">
                        <?
                   require_once('headeradmin.php'); // uri  
                   ?>                   
                        <div class="wrapper">
                            <form class="formCreateShelf">
                                <div class="wrapCreateShelfandUser">
                                    <div class="wrapCreateShelf">
                                        <p class="textCreateShelf titleCreate">Edit Shelf</p>
                                        <div class="wrapTmbnlShelf">
                                            <img class="upThumImg" src="img/mocimagetile.png" alt="upimage">
                                            <p class="recommendThumShelf">300 x 300 px</p>
                                            <button class="btnBrowseTmbnl btnCreateS">+ Image</button>
                                        </div>
                                        <div class="wrapTitleandDsctShelf">
                                            <input class="inptTitleShelf inptTitleDsct" type="text" placeholder="Title" value="Mus dignissim sociis, augue aliquet placerat sit lorem enim enim, pulvinar aenean,">
                                            <textarea class="inptDsctShelf inptTitleDsct" placeholder="Description" value="">Proin dictumst, mauris sed non! Adipiscing rhoncus ridiculus non parturient. Duis odio cras augue massa placerat? Magnis nisi elit mid sed elementum. Cras turpis! Cras sagittis est placerat, tempor cum turpis scelerisque sed elementum montes dapibus rhoncus, ultrices non, habitasse.</textarea>
                                        </div>
                                        <div class="wrapAddSceenshot">
                                            <div class="addSlide">
                                                <div class="wrapScsDef">
                                                    <div class="wrapTumbnlDef">
                                                        <div class="upScsImg">
                                                            <img class="upScsImgA" src="img/b1.png" alt="upimage">
                                                            <div class="upScsImgA recSizeBar recBar">
                                                                <input class="inptLink" type="text" placeholder="http://www.w3schools.com/cssref/default.asp#animation">
                                                                <p class="recommendScsBook textUnderTumbnl">Recommended Size : 800 x 200 px</p>
                                                            </div>
                                                        </div>
                                                        <div class="upScsImg">
                                                            <img class="upScsImgA" src="img/b2.jpg" alt="upimage">
                                                            <div class="upScsImgA recSizeBar recBar">
                                                                <input class="inptLink" type="text" placeholder="http://www.w3schools.com/cssref/default.asp#animation">
                                                                <p class="recommendScsBook textUnderTumbnl">Recommended Size : 800 x 200 px</p>
                                                            </div>
                                                        </div>
                                                        <div class="upScsImg">
                                                            <img class="upScsImgA" src="img/b3.jpg" alt="upimage">
                                                            <div class="upScsImgA recSizeBar recBar">
                                                                <input class="inptLink" type="text" placeholder="http://www.w3schools.com/cssref/default.asp#animation">
                                                                <p class="recommendScsBook textUnderTumbnl">Recommended Size : 800 x 200 px</p>
                                                            </div>
                                                        </div>
                                                        <div class="upScsImg">
                                                            <img class="upScsImgA" src="img/b4.jpeg" alt="upimage">
                                                            <div class="upScsImgA recSizeBar recBar">
                                                                <input class="inptLink" type="text" placeholder="http://www.w3schools.com/cssref/default.asp#animation">
                                                                <p class="recommendScsBook textUnderTumbnl">Recommended Size : 800 x 200 px</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="dotPage">
                                                <div class="dotOut dotP1 dotIn"></div>
                                                <div class="dotOut dotP2 "></div>
                                                <div class="dotOut dotP3 "></div>
                                                <div class="dotOut dotP4 "></div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="wrapCreateUserandTable">
                                        <p class="textCreateUser titleCreate">Create User</p>
                                        <div class="wrapCreateUser">
                                            <input class="inptNameUser inptUser" type="text" placeholder="Username">
                                            <input class="inptEmailUser inptUser" type="text" placeholder="Email">
                                            <input class="inptPwdUser inptUser" type="password" placeholder="Password">
                                            <button class="btnCreateUser btnCreateS">+ User</button>
                                        </div>
                                        
                                        <table class="wrapTableUser">
                                            <tr>
                                                <th>ID</th>
                                                <th>Username</th>
                                                <th>Email</th>
                                                <th>Password</th>
                                                <th>Edit</th>
                                                <th>Delete</th>
                                            </tr>
                                            <form>
                                                <tr>
                                                    <td>101</td>
                                                    <td>
                                                        <input class="inptNameUser inptUserOld" type="text" placeholder="maruko" value="maruko">
                                                    </td>
                                                    <td>
                                                         <input class="inptEmailUser inptUserOld" type="text" placeholder="maruko@live.com" value="maruko@live.com"> 
                                                    </td>
                                                    <td>
                                                        <button class="btnResetPwd btnCreateS">reset</button>
                                                    </td>
                                                    <td>
                                                        <i class="iconEdit"></i>
                                                    </td>
                                                    <td>
                                                        <i class="iconDelete"></i>
                                                    </td>
                                                </tr>
                                            </form>
                                        </table>
                                    </div>
                                </div>
                                <div class="wrapBtnCreateShelf">
                                    <button class="btnCreateShelf btnCreateS">Edit Shelf</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        <script>
            $(function() {
                //left value = img width + margin-right
                $(".dotOut").click(function() {
                    $(".dotOut").addClass("dotIn").not(this).removeClass("dotIn");
                    switch (true) {
                      case $(this).hasClass('dotP1'):
                            $(".wrapTumbnlDef").animate({
                                left: '0'
                            }, 700 );
                            break;
                      case $(this).hasClass('dotP2'):
                            $(".wrapTumbnlDef").animate({
                                left: '-805px'
                            }, 700 );
                            break;
                      case $(this).hasClass('dotP3'):
                            $(".wrapTumbnlDef").animate({
                                left: '-1610px'
                            }, 700 );
                            break;
                      case $(this).hasClass('dotP4'):
                            $(".wrapTumbnlDef").animate({
                                left: '-2415px'
                            }, 700 );
                            break;
                    }
                 });
            });
        </script>
   <?
        require_once('footer.php'); // uri  
        ?>